(function ($) {
    $.fn.extend({
        initCarousel: function (list, config, style) {
            var $this = this;
            $this.css("position", "relative");
            style = style || {};
            config = config || {};
            config.delay = config.delay || 3000;
            style.controller = style.controller || "position: absolute;bottom: 1rem;left: 0;right: 0;";
            style.item = style.item || "width: .2rem;height: .1rem;margin: .1rem;background: rgba(255, 255, 255, 0.5);";
            style.active = style.active || "width: .2rem;height: .1rem;margin: .1rem;background: #ffffff;";
            var carousel = '<ul class="carousel lib-flex-row-start" style="width: ' + (list.length + 2) + '00%;height: 100%;margin-left:-100%;">';
            var controller = '<ul class="controller lib-flex-row-center" style="' + style.controller + '">';
            carousel += '<li class="lib-flex-1" style="background: url(' + list[list.length - 1] + ') center no-repeat; background-size: cover;list-style: none;"></li>';
            for (var i in list) {
                carousel += '<li class="lib-flex-1" style="background: url(' + list[i] + ') center no-repeat; background-size: cover;list-style: none;"></li>';
                controller += '<li style="' + style.item + '"></li>';
            }
            carousel += '<li class="lib-flex-1" style="background: url(' + list[0] + ') center no-repeat; background-size: cover;list-style: none;"></li></ul>';
            controller += "</ul>";
            $this.append(carousel);
            $this.append(controller);
            $this.find(".controller li:nth-child(1)").attr("style", style.active);
            var now = 1, scrolling = false, scrollLeft = false, scrollRight = false;

            function scroll(scrollLeft, to) {
                if (scrolling) {
                    return false;
                }
                now = to || now;
                scrolling = true;
                if (scrollLeft) {
                    $this.find(".controller li").attr("style", style.item);
                    $this.find(".controller li:nth-child(" + ((now + 1) % list.length + 1) + ")").attr("style", style.active);
                    var i = ((now + 2) % list.length + 1) * 100;
                    var interval = setInterval(function () {
                        i--;
                        if (i % 100 === 0) {
                            clearInterval(interval);
                            scrolling = false;
                        }
                        $this.find(".carousel").css("margin-left", -i + "%");
                    }, 1);
                    now = (now + 1) % list.length + 1;
                } else {
                    $this.find(".controller li").attr("style", style.item);
                    $this.find(".controller li:nth-child(" + (now % list.length + 1) + ")").attr("style", style.active);
                    i = now * 100;
                    interval = setInterval(function () {
                        i++;
                        if (i % 100 === 0) {
                            clearInterval(interval);
                            scrolling = false;
                        }
                        $this.find(".carousel").css("margin-left", -i + "%");
                    }, 1);
                    now = now % list.length + 1;
                }
            }

            setInterval(function () {
                scroll();
            }, config.delay);
            $this.find(".carousel").on('touchstart', function (e) {
                var touch = e.originalEvent,
                    startX = touch.changedTouches[0].pageX, startY = touch.changedTouches[0].pageY;
                $(".carousel").on('touchmove', function (e) {
                    e.preventDefault();
                    touch = e.originalEvent.touches[0] ||
                        e.originalEvent.changedTouches[0];
                    if (!scrolling) {
                        scrollLeft = touch.pageX - startX > 20;
                        scrollRight = touch.pageX - startX < -20;
                    }
                });
            }).on('touchend', function () {
                if (scrollLeft || scrollRight) {
                    scroll(scrollLeft);
                    scrollLeft = scrollRight = false;
                }
                $(".carousel").off('touchmove');
            });
            $this.find(".controller li").on("click", function () {
                var index = $(this).index() + 1;
                now === index || scroll(now > index, index);
            });
        }
    });
})(jQuery);
$("#test").initCarousel(["../../../img/ads1.png"]);

function onPageReady() {
}